<template>
	<div>
		<div class="row">
					<div class="col-lg-12">
						<div class="panel">
							<div class="panel-heading bk-bg-primary">
								<h6><i class="fa fa-table red"></i><span class="break"></span>订单管理</h6>
								<div class="panel-actions">
									<a class="btn-setting" style="color: #fff;">总订单数： {{rowCount}} &nbsp;&nbsp;</a>
								</div>
							</div>

							<div class="panel-body">

								<div style="float: left; margin-bottom: 10px; " v-if="roleInfo.role === 'ROLE_ADMIN' || roleInfo.role === 'ROLE_SALES_DIRECTOR'">
									<button class="btn btn-warning" @click="addOrder">新增订单</button>
								</div>
								<div style="float: right; margin-bottom: 10px; width: 750px">
									<div class="input-group" style="float: left;width:600px">
										<div class="col-sm-4" style="padding-left: 0">
											<input type="text" class="form-control" placeholder="订单号" v-model="orderId">
										</div>
										<div class="col-sm-4" style="padding-left: 0">
											<input type="text" class="form-control" placeholder="套餐名称" v-model="packageName">
										</div>

										<div class="col-sm-4" style="padding-left: 0">
											<div class="form-group has-feedback">
												<div class="input-group">
															<span class="input-group-addon">
																<i class="fa fa-calendar"></i>
															</span>
													<input type="date" class="form-control" style="padding: 0;" placeholder="订购日期" v-model="orderDate">
												</div>
											</div>
										</div>
									</div>
									<button type="button" class="btn btn-success" @click="orderSearch">搜索</button>
									<form name="myform" action="../mainOrder/export" method="post" enctype="multipart/form-data" style="display: inline">
										<button type="submit" class="btn btn-info">导出</button>
									</form>
								</div>
								<div class="clearfix"></div>

								<div class="table-responsive">
									<table class="table table-striped table-bordered bootstrap-datatable datatable">
										<thead>
										<tr>
											<th>订单号</th>
                      <th>客户名称</th>
                      <th>套餐</th>
                      <th>标准价格</th>
											<th>优惠价格</th>
											<th>数量</th>
											<th>订单金额</th>
											<th>日期</th>
											<th>操作</th>
										</tr>
										</thead>
										<tbody>
										<tr v-for="(items, index) in orderList.result">
											<td><a @click="getOrderInfo(items.id)"> AT2016111100{{items.id}}</a></td>
											<td>{{items.customerName}}</td>
											<td>{{items.soldPackageName}}</td>
											<td>{{items.standardPrice}}</td>
											<td>{{items.unitPrice}}</td>
											<td>{{items.buyNum}}</td>
											<td>{{items.totalPrice}}</td>
											<td>{{items.gmtCreate}}</td>
											<td>
												<a class="btn btn-danger" @click="orderDel(items.id)">
													<i class="fa fa-trash-o "></i>
												</a>
											</td>
										</tr>
										</tbody>
									</table>
								</div>
							</div>
						</div>
					</div>



					<lsc-page
									mode="event"
									:totalPage="pages"
									:init-page="eventPage"
									:eventFunt="eventFunt"
									:eventParams="eventParams"
									@go-page="goPage"></lsc-page>
				</div>

				<!-- Modal Dialog -->
				<div class="modal fade" id="getOrderInfo">
					<div class="modal-dialog" style="width: 800px;">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
								<h4 class="modal-title bk-fg-primary">订单号：AT2016111100{{mainId}}</h4>
							</div>
							<div class="modal-body">
								<div class="panel-body">

									<div class="table-responsive">
										<table class="table table-striped table-bordered bootstrap-datatable datatable">
											<thead>
											<tr>
												<th style="min-width: 50px;">序号</th>
												<th>ICCID</th>
												<th>卡号码</th>
												<th>生效日期</th>
												<th>套餐</th>
												<th>卡状态</th>
												<th>当月实时流量</th>
												<th>剩余流量</th>
												<th>有效日期</th>
												<th>客户名称</th>
											</tr>
											</thead>
											<tbody>

											<tr v-for="(items, index) in orderInfoList.result">
												<td>{{index + 1}}</td>
												<td>{{items.iccid}}</td>
												<td>{{items.msisdn}}</td>
												<td>{{items.activetime}}</td>
												<td>{{items.packageName}}</td>
												<td>{{items.statusName}}</td>
												<td>{{items.datammonth}}</td>
												<td>{{items.datasurplus}}</td>
												<td>{{items.expiredtime}}</td>
												<td>{{items.username}}</td>
											</tr>
											</tbody>
										</table>
									</div>
									<lsc-page
													mode="event"
													:totalPage="pagesInfo"
													:init-page="eventPage"
													:eventFunt="eventInfoFunt"
													@go-info-page="goPage"></lsc-page>
								</div>

							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
								<form name="myform" action="../secondaryOrder/export" method="post" enctype="multipart/form-data" style="display: inline">
									<input type="hidden" name="mainId" v-model="mainId">
									<button type="submit" class="btn btn-primary">导出</button>
								</form>
							</div>
						</div>
					</div>
				</div>
				<!-- End Modal Dialog -->
	</div>
</template>
<script>

	import LscPage from '../../components/page_list.vue'
	import {mapGetters} from 'vuex'

	export default{
		name: 'home',
		computed: {
			...mapGetters({
				navStatus: 'getNavStatus',
				roleInfo: 'getRoleInfo',
				orderList: 'getOrderList',
				orderInfoList: 'getOrderInfoList'
			}),
			pages () {
				if(this.orderList.pageInfo){
					return this.orderList.pageInfo.totalPage
				}
			},
			pagesInfo () {
				if(this.orderInfoList.pageInfo){
					return this.orderInfoList.pageInfo.totalPage
				}
			}
		},
		data () {
			return {
				eventPage: 1,
				eventInfoPage: 1,
				eventFunt: 'fetchOrderList',
				eventParams: {},
				eventInfoFunt: 'fetchOrderInfo',
				rowCount: 0, // 总订单数

				packageName: '',
				orderId: '',
				orderDate: '',
				mainId: ''
			}
		},
		methods: {
			addOrder () {
				this.$router.push({ path: '/orderAdd' })
			},

			getOrderInfo (ids) {

				let params = {
					page: 1,
					mainId: ids
				}
				this.$store.dispatch('fetchOrderInfo', params)
				$('#getOrderInfo').modal('show')
				this.mainId = ids
			},

			goPage (data) {
				this.eventPage = data.page
			},

			goInfoPage (data) {
				this.eventInfoPage = data.page
			},

			orderSearch () {

				let orderIDS = this.orderId.substring(12)

				let params = {
					operatorId: '', //	运营商ID	number
					orderDate: this.orderDate, //	订购日期	string	格式yyyy-MM-dd
					orderId: orderIDS,	// 订单号	number
					packageName: this.packageName //	销售套餐名称	string
				}
				this.eventParams.operatorId = ''
				this.eventParams.orderDate = this.orderDate
				this.eventParams.orderId = orderIDS
				this.eventParams.packageName = this.packageName
				this.$store.dispatch('fetchOrderList', params)
			},
			orderDel (ids) {

				this.$store.dispatch('fetchOrderDel', {orderId: ids})
			}
		},
		created () {

		},
		mounted () {

			// 角色
			this.$store.dispatch('fetchRole')

			// 获取所有订单信息列表
			let params = {
				operatorId: '', //	运营商ID	number
				orderDate: '', //	订购日期	string	格式yyyy-MM-dd
				orderId: '',	// 订单号	number
				packageName: '' //	销售套餐名称	string
			}
			this.$store.dispatch('fetchOrderList', params)


		},
		components: {
			LscPage
		},
		watch: {
			orderList (newVal) {
				this.eventPage = newVal.pageInfo.pageIndex
				this.rowCount = newVal.pageInfo.rowCount
			}
		}
	}
</script>

<style>

</style>
